
<template>
	<basic-container>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="店铺账户" name="B">
				<avue-crud :option="option" :data="data" ref="crud" v-model="form" :table-loading="loading" :permission="permissionList"
						   :page="page" @refresh-change="refreshChange" @search-change="searchChange" @search-reset="searchReset"
						   @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
					<template slot-scope="scope" slot="menu">
						<el-button type="text" size="small" @click="viewDetail(scope.row.id)"  v-has="'/mall-cloud-account/tradeRecord/list'">查看流水</el-button>
					</template>
				</avue-crud>
			</el-tab-pane>
			<el-tab-pane label="用户账户" name="A">
				<avue-crud :option="optionUser" :data="dataUser" ref="crudUser" v-model="formUser" :table-loading="loadingUser" :permission="permissionList"
						   :page="pageUser" @refresh-change="refreshChangeUser" @search-change="searchChangeUser" @search-reset="searchResetUser"
						   @current-change="currentChangeUser" @size-change="sizeChangeUser" @on-load="onLoadUser">
					<template slot-scope="scope" slot="menu">
						<el-button type="text" size="small" @click="viewDetail(scope.row.id)" v-has="'/mall-cloud-account/tradeRecord/list'">余额流水</el-button>
					</template>
				</avue-crud>
			</el-tab-pane>
		</el-tabs>

		<el-dialog title="流水详情" v-if="showExperienceGroup" width="80%" :visible.sync="dialogDeatilVisible" @closed="closeDialog()">
			<avue-crud :option="optionDetailSeller" :data="dataDetail" ref="tradeRecordList" v-model="form" :table-loading="loading" :permission="permissionList"
					   :page="tradeRecordPage" @refresh-change="refreshTradeRecordListChange" @search-change="searchTradeRecordListChange" @search-reset="searchTradeRecordListReset"
					   @current-change="currentTradeRecordListChange" @size-change="sizeTradeRecordListChange">
				<template slot-scope="scope" slot="menu">
					<el-button type="text" size="small" @click="viewAccountLog(scope.row)">余额日志</el-button>
				</template>
			</avue-crud>
		</el-dialog>

        <!--用户专用(积分流水)-->
		<el-dialog title="积分流水详情" v-if="showExperienceGroupUser" width="80%" :visible.sync="dialogDeatilUserVisible" @closed="closeUserDialog()">
			<avue-crud :option="optionDetailUser" :data="dataUserDetail" ref="tradeRecordUserList" v-model="formUser" :table-loading="loadingUser" :permission="permissionList"
					   :page="tradeRecordUserPage" @refresh-change="refreshTradeRecordUserListChange" @search-change="searchTradeRecordUserListChange" @search-reset="searchTradeRecordUserListReset"
					   @current-change="currentTradeRecordUserListChange" @size-change="sizeTradeRecordUserListChange">
				<template slot-scope="scope" slot="menu">
					<el-button type="text" size="small" @click="viewIntegralLog(scope.row)">积分日志</el-button>
				</template>
			</avue-crud>
		</el-dialog>

        <!--查看日志-->
		<el-dialog :title=logLabel v-if="showTradeLog" width="60%" :visible.sync="dialogLogVisible" @closed="closeLogDialog()">
			<user-account-log ref="tradeLogList" v-bind:whichRole="whichRole" v-bind:whichType="whichType" v-bind:passUaId="passUaId"
												v-bind:userType="userType" v-bind:passTrId="passTrId"/>
		</el-dialog>

	</basic-container>
</template>

<script>
	import userAccountLog from "@/components/userAccountLog/userAccountLog";
	import {
		getList,
		tradeRecordList,
		tradeRecordIntegralList
	} from "@/api/account/userAccount/userAccount";
	import {
		mapGetters
	} from "vuex";
	var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
	var DIC = {
		OPERATIONTYPE: [
			{
				label: '支出',
				value: 0
			},
			{
				label: '收入',
				value: 1
			}
		],
	};
	export default {
		data() {
			return {
				activeName: 'B',
				showExperienceGroup: false,
				showExperienceGroupUser:false,
				dialogDeatilVisible: false,
				dialogDeatilUserVisible:false,
				form: {},
				formUser:{},
				query: {
					uaType:2,
				},
				queryUser:{
					uaType:1,
				},
				tradeRecordQuery: {},
				tradeRecordUserQuery: {},
				loading: true,
				loadingUser:true,
				rolesTree: [],
				rolesKeys: [],
				dataDetail:[],
				dataUserDetail:[],
				data: [{
					uaName: '你好',
					totalAmount: '1002',
					lockAmount: '120',
					serviceAmount: '130',
					adAmount: '80',
					mobile: '15845245235',
					payPassword: '254252',
					payPasswordSalt: '485648',
				}],
				dataUser: [{
					uaName: '你好',
					totalAmount: '1002',
					lockAmount: '120',
					serviceAmount: '130',
					adAmount: '80',
					mobile: '15845245235',
					payPassword: '254252',
					payPasswordSalt: '485648',
				}],
				box: false,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				pageUser: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				tradeRecordPage: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				tradeRecordUserPage: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				//页面加载展示用的option
				option: {
					size: 'mini',
					addBtn: false,
					editBtn: false,
					delBtn: false,
					viewBtn: false,
					align:'center',
					tip: false,
					border: true,
					rowKey: 'id',
					height: 'auto',
					// calcHeight: 380,
					menuWidth: 100,
					searchMenuSpan:6,
					column: [
						{
							label: "账户名称",
							prop: "uaName",
							fixed: true,
							search: true,
							rules: [{
								required: true,
								message: "请输入账户名称",
								trigger: "blur"
							}]
						},
						{
							label: "创建时间",
							prop: "addTime",
							rules: [{
								required: true,
								message: "请输入创建时间",
								trigger: "blur"
							}]
						},
						{
							label: "可用金额",
							prop: "totalAmount",
							rules: [{
								required: true,
								message: "请输入可用金额",
								trigger: "blur"
							}]
						},
						{
							label: "锁定总额",
							prop: "lockAmount",
							rules: [{
								required: true,
								message: "请输入锁定总额,指所有在途中的金额",
								trigger: "blur"
							}]
						},
						{
							label: "总服务费",
							prop: "serviceAmount",
							rules: [{
								required: true,
								message: "请输入交给平台的总服务费",
								trigger: "blur"
							}]
						},
						{
							label: "广告金额",
							prop: "adAmount",
							rules: [{
								required: true,
								message: "请输入买广告的金额",
								trigger: "blur"
							}]
						},
						{
							label: "手机号",
							prop: "mobile",
							rules: [{
								required: true,
								message: "请输入绑定手机号",
								trigger: "blur"
							}]
						},

					]
				},
				optionUser: {
					size: 'mini',
					addBtn: false,
					editBtn: false,
					delBtn: false,
					align:'center',
					tip: false,
					border: true,
					rowKey: 'id',
					height: 'auto',
					// calcHeight: 380,
					menuWidth: 150,
					searchMenuSpan:6,
					column: [
						{
							label: "账户名称",
							prop: "uaName",
							fixed: true,
							search: true,
							rules: [{
								required: true,
								message: "请输入账户名称",
								trigger: "blur"
							}]
						},
						{
							label: "创建时间",
							prop: "addTime",
							fixed: true,
							rules: [{
								required: true,
								message: "请输入创建时间",
								trigger: "blur"
							}]
						},
						{
							label: "可用金额",
							prop: "totalAmount",
							fixed: true,
							rules: [{
								required: true,
								message: "请输入可用金额",
								trigger: "blur"
							}]
						},
						{
							label: "锁定总额",
							prop: "lockAmount",
							fixed: true,
							rules: [{
								required: true,
								message: "请输入锁定总额,指所有在途中的金额",
								trigger: "blur"
							}]
						},
						{
							label: "手机号",
							prop: "mobile",
							fixed: true,
							rules: [{
								required: true,
								message: "请输入绑定手机号",
								trigger: "blur"
							}]
						},
						/*{
							label: "可用积分",
							prop: "totalIntegral",
							fixed: true,
							rules: [{
								required: true,
								message: "请输入可用积分",
								trigger: "blur"
							}]
						},
						{
							label: "锁定积分",
							prop: "lockIntegral",
							fixed: true,
							rules: [{
								required: true,
								message: "请输入锁定积分",
								trigger: "blur"
							}]
						},*/

					]
				},
				optionDetailUser: {
					size: 'mini',
					addBtn: false,
					editBtn:false,
					delBtn:false,
					viewBtn:false,
					menu: true,
					columnBtn:true,
					border: true,
					rowKey: 'id',
					align:'center',
					height: 'auto',
					// calcHeight: 380,
					menuWidth: 100,
					column: [
						{
							label: "创建时间",
							prop: "addTime",
							fixed: true,
						},
						{
							label: "交易号",
							prop: "tradeNo",
							width:150,
							fixed: true,
							rules: [{
								required: true,
								message: "请输入三方系统交易号,相同appid内三方系统交易号不可重复",
								trigger: "blur"
							}]
						},
						{
							label: "三方系统交易号",
							prop: "outTradeNo",
							width:150,
							fixed: true,
							rules: [{
								required: true,
								message: "请输入三方系统交易号,相同appid内三方系统交易号不可重复",
								trigger: "blur"
							}]
						},
						{
							label: "交易类型",
							prop: "tradeType",
							fixed: true,
							dicData:Dict.integralTradeTypeEnum,
							rules: [{
								required: true,
								message: "请输入交易类型：1订单收款，2买家订单退款收入，3订单付款,",
								trigger: "blur"
							}]
						},
						{
							label: "操作积分",
							prop: "integral",
							fixed: true,
						},
						{
							label: "交易描述",
							prop: "subject",
							fixed: true,
						},
						{
							label: "交易状态 ",
							prop: "tradeStatus",
							fixed: true,
							dicData:Dict.tradeStatusEnum,
							rules: [{
								required: true,
								message: "请输入交易状态 ：0等待买家付款  1交易失败 2成功 3已通知 4通知失败",
								trigger: "blur"
							}]
						},
						{
                            label: "流水状态 ",
                            prop: "lockStatus",
                            fixed: true,
                            dicData:Dict.lockStatusEnum,
                         },
						{
							label: "操作类型 ",
							prop: "operationType",
							fixed: true,
							dicData:DIC.OPERATIONTYPE,
						},

					]
				},
				optionDetailSeller: {
					size: 'mini',
					addBtn: false,
					editBtn:false,
					delBtn:false,
					viewBtn:false,
					menu: true,
					columnBtn:true,
					border: true,
					rowKey: 'id',
					align:'center',
					height: 'auto',
					// calcHeight: 380,
					menuWidth: 100,
					column: [
						{
							label: "创建时间",
							prop: "addTime",
							fixed: true,
						},
						{
							label: "三方系统交易号",
							prop: "outTradeNo",
							width:150,
							fixed: true,
							rules: [{
								required: true,
								message: "请输入三方系统交易号,相同appid内三方系统交易号不可重复",
								trigger: "blur"
							}]
						},
						{
							label: "交易类型",
							prop: "tradeType",
							fixed: true,
							dicData:Dict.tradeTypeEnum,
							rules: [{
								required: true,
								message: "请输入交易类型：1订单收款，2分销返利加钱，3买家订单退款收入，4充值，5订单付款、6分销返利减钱、7卖家退款支出、8广告付款（扣广告账户）、9提现、10总账户转广告账户",
								trigger: "blur"
							}]
						},
						{
							label: "操作金额",
							prop: "amount",
							fixed: true,
						},
						{
							label: "服务费",
							prop: "serviceAmount",
							fixed: true,
							showColumn:false,
							hide:true,
						},
						{
							label: "交易描述",
							prop: "subject",
							fixed: true,
						},
						{
							label: "交易状态 ",
							prop: "tradeStatus",
							fixed: true,
							dicData:Dict.tradeStatusEnum,
							rules: [{
								required: true,
								message: "请输入交易状态 ：0等待买家付款  1交易失败 2成功 3已通知 4通知失败",
								trigger: "blur"
							}]
						},
						{
                            label: "流水状态 ",
                            prop: "lockStatus",
                            fixed: true,
                            dicData:Dict.lockStatusEnum,
                            },
					]
				},
				showTradeLog: false,
				dialogLogVisible:false,
				whichType:"original",
				whichRole:'PC',
				userType: 'sellerType',
				passUaId:'',
				passTrId:'',
				logLabel:'余额日志',
			};
		},
		components: {
			userAccountLog,
		},
		computed: {
			...mapGetters(["permission", 'userInfo']),
			permissionList() {
				return {
				};
			},
		},
		methods: {
			// 切换tab
			handleClick(tab) {
				if(tab.name == "A"){
					this.$refs.crud.searchReset();
					this.userType = "userType";
					this.optionDetailSeller.column[4].showColumn  = false;
					this.optionDetailSeller.column[4].hide  = true;
				}
				else {
					this.$refs.crudUser.searchReset();
					this.userType = "sellerType";
					this.optionDetailSeller.column[4].showColumn  = true;
					this.optionDetailSeller.column[4].hide  = false;
				}
			},
			// 流水详情
			searchTradeRecordListReset() {
				this.tradeRecordQuery = {};
				this.onTradeRecordListLoad(this.tradeRecordPage);
			},
			searchTradeRecordListChange(params,done) {
				this.tradeRecordQuery = params;
				this.onTradeRecordListLoad(this.tradeRecordPage, params,done);
			},
			currentTradeRecordListChange(currentPage) {
				this.tradeRecordPage.currentPage = currentPage;
				this.onTradeRecordListLoad(this.tradeRecordPage);
			},
			sizeTradeRecordListChange(pageSize) {
				this.tradeRecordPage.pageSize = pageSize;
				this.onTradeRecordListLoad(this.tradeRecordPage);
			},
			refreshTradeRecordListChange() {
				this.currentTradeRecordListChange(1);
				this.onTradeRecordListLoad(this.tradeRecordPage);
			},
			viewDetail(id) {
				this.tradeRecordQuery.uaId = id;
				this.tradeRecordPage.currentPage = 1;
				this.onTradeRecordListLoad(this.tradeRecordPage);
			},
			//查看的交易日志
			viewAccountLog(row){
				this.passUaId = row.uaId;
				this.passTrId = row.id;
				this.dialogLogVisible = true;
				this.showTradeLog = true;
				this.logLabel="余额日志";
				this.whichType = "original";
			},
			// 查看的积分交易日志
			viewIntegralLog(row){
				this.passUaId = row.uaId;
				this.passTrId = row.id;
				this.dialogLogVisible = true;
				this.showTradeLog = true;
				this.logLabel = "积分日志";
				this.whichType = "integral";
			},
			//关闭查看的交易日志
			closeLogDialog(){
				this.dialogLogVisible = false;
				this.showTradeLog = false;
				this.onLoad(this.page);
			},
			onTradeRecordListLoad(tradeRecordPage, params = {},done){
				tradeRecordList(tradeRecordPage.currentPage, tradeRecordPage.pageSize, Object.assign(params, this.tradeRecordQuery)).then(res=>{
					if(done){
						done();
					}
					if(res.data.code==200){
						const dataSeller = res.data;
						this.tradeRecordPage.total = dataSeller.count;
						this.dataDetail=res.data.data
						this.dialogDeatilVisible = true;
						this.showExperienceGroup = true;
					}else{
						this.$message(res.data.message)
					}
				})
			},
			closeDialog () {
				this.dialogDeatilVisible = false;
				this.showExperienceGroup = false;
				this.onLoad(this.page, this.query)
			},
			//积分流水详情
			searchTradeRecordUserListReset(){
				this.tradeRecordUserQuery = {};
				this.onTradeRecordIntegralListLoad(this.tradeRecordUserPage);
			},
			searchTradeRecordUserListChange(params,done){
				this.tradeRecordUserQuery = params;
				this.onTradeRecordIntegralListLoad(this.tradeRecordUserPage, params,done);
			},
			currentTradeRecordUserListChange(currentPage){
				this.tradeRecordUserPage.currentPage = currentPage;
				this.onTradeRecordIntegralListLoad(this.tradeRecordUserPage);
			},
			sizeTradeRecordUserListChange(pageSize){
				this.tradeRecordUserPage.pageSize = pageSize;
				this.onTradeRecordIntegralListLoad(this.tradeRecordUserPage);
			},
			refreshTradeRecordUserListChange(){
				this.currentTradeRecordUserListChange(1);
				this.onTradeRecordIntegralListLoad(this.tradeRecordUserPage);
			},
			viewIntegralDetail(id) {
				this.tradeRecordUserQuery.uaId = id;
				this.tradeRecordUserPage.currentPage = 1;
				this.onTradeRecordIntegralListLoad(this.tradeRecordUserPage);
			},

			onTradeRecordIntegralListLoad(tradeRecordUserPage, params = {},done){
				tradeRecordIntegralList(tradeRecordUserPage.currentPage, tradeRecordUserPage.pageSize, Object.assign(params, this.tradeRecordUserQuery)).then(res=>{
					if(done){
						done();
					}
					if(res.data.code==200){
						const dataUser = res.data;
						this.tradeRecordUserPage.total = dataUser.count;
						this.dataUserDetail=res.data.data
						this.dialogDeatilUserVisible = true;
						this.showExperienceGroupUser = true;
					}else{
						this.$message(res.data.message)
					}
				})
			},
			closeUserDialog(){
				this.dialogDeatilUserVisible = false;
				this.showExperienceGroupUser = false;
				this.onLoadUser(this.pageUser,this.queryUser);
			},
			//以下是页面加载店铺需要用到的方法
			searchReset() {
				this.query = {};// 清空搜索条件时需要保留tab状态对应的用户type
				this.query.uaType = 2;
				this.onLoad(this.page);
			},
			searchChange(params,done) {
				this.page.currentPage=1
				params.uaType = this.query.uaType;
				this.query = params;
				this.onLoad(this.page, params,done);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			refreshChange() {
				this.onLoad(this.page);
			},
			onLoad(page, params = {},done) {
				console.log(this.option.column)
				this.loading = true;
				this.query.uaType = 2;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					this.loading = false;
					const data = res.data;
					console.log(data);
					this.page.total = data.count;
					this.data = data.data;
				});
				console.log(Dict.integralTradeTypeEnum);
			},
			//以下是页面加载用户需要用到的方法
			searchResetUser(){
				this.queryUser = {};// 清空搜索条件时需要保留tab状态对应的用户type
				this.queryUser.uaType = 1;
				this.onLoadUser(this.pageUser);
			},
			searchChangeUser(params,done){
				this.pageUser.currentPage = 1;
				params.uaType = this.queryUser.uaType;
				this.queryUser = params;
				this.onLoadUser(this.pageUser,params,done);
			},
			currentChangeUser(currentPage){
				this.pageUser.currentPage = currentPage;
			},
			sizeChangeUser(pageSize){
				this.pageUser.pageSize = pageSize;
			},
			refreshChangeUser(){
				this.onLoadUser(this.pageUser);
			},
			onLoadUser(page, params = {},done) {
				console.log(this.option.column);
				this.loadingUser = true;
				this.query.uaType = 1;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.queryUser)).then(res => {
					if(done){
						done();
					}
					this.loadingUser = false;
					const dataUser = res.data;
					console.log(dataUser);
					this.pageUser.total = dataUser.count;
					this.dataUser = dataUser.data;
				});
			},
		}
	};
</script>

<style>
</style>
